<template>
	<view class="" >
		<view class="main_type box_redius" style="padding: 40rpx;">
			<view class="box" v-for="item in baseList" :key="item.id" @click="goToUrl(item.id)">
				<image :src="item.img" mode="widthFix" style="width: 60rpx;padding-top: 20rpx;"></image>
				<view class="text">{{item.title}}</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		technicalCategoryList
	} from '@/api/index.js'
	export default {
		data() {
			return {
				troubleList: [],
				baseList: [{
					id:1,
						title: '屏幕',
						img:'../../../static/troubleshooting/t1.png'
					},
					{
						id:8,
						title: '软件异常',
						img:'../../../static/troubleshooting/t2.png'
					},
					{
						id:3,
						title: '卡顿与死机',
						img:'../../../static/troubleshooting/t3.png'
					},
					{
						id:6,
						title: '配件问题',
						img:'../../../static/troubleshooting/t4.png'
					},
					{
						id:2,
						title: '充电与耗电',
						img:'../../../static/troubleshooting/t5.png'
					},
					{
						id:5,
						title: '政策及流程',
						img:'../../../static/troubleshooting/t6.png'
					},
					{
						id:4,
						title: '网络通信',
						img:'../../../static/troubleshooting/t7.png'
					},
					{
						id:10,
						title: '封闭与管控',
						img:'../../../static/troubleshooting/t8.png'
					},
					{
						id:9,
						title: '其他',
						img:'../../../static/troubleshooting/t9.png'
					},
				],
			}
		},
		created() {
			this.gettechnicalCategoryList()
		},
		methods: {
			//故障排查分类列表
			gettechnicalCategoryList() {
				technicalCategoryList().then(res => {
					this.troubleList = res.data
					console.log(res.data);
				})
			},
			goToUrl(id) {
				uni.navigateTo({
					url: '/pages/malfunction/index?cid=' + id
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	$bor-color:#f3f3f3;
	.main_type .box:nth-child(1){
		border: 0;
		border-right: 1px solid $bor-color;
		border-bottom: 1px solid $bor-color;
	}
	.main_type .box:nth-child(2){
		border: 0;
		border-right: 1px solid $bor-color;
		border-bottom: 1px solid $bor-color;
	}
	.main_type .box:nth-child(3){
		border: 0;
		border-bottom: 1px solid $bor-color;
	}
	.main_type .box:nth-child(4){
		border: 0;
		border-right: 1px solid $bor-color;
		border-bottom: 1px solid $bor-color;
	}
	.main_type .box:nth-child(5){
		border: 0;
		border-right: 1px solid $bor-color;
		border-bottom: 1px solid $bor-color;
	}
	.main_type .box:nth-child(6){
		border: 0;
		border-bottom: 1px solid $bor-color;
	}
	.main_type .box:nth-child(7){
		border: 0;
		border-right: 1px solid $bor-color;
	}
	.main_type .box:nth-child(8){
		border: 0;
		border-right: 1px solid $bor-color;
	}
	.main_type {
		display: grid;
		grid-template-columns: repeat(3, 33.33%);

		.box {
			text-align: center;
			// margin: 20rpx 0 20rpx 0;
			padding: 20rpx 0 40rpx 0;
			image {
				height: 98rpx;
				width: 98rpx;
			}
		}
	}
</style>
